<template>
  <div class="e-wrap">
    <w-form-validate @on-validate="submitSaveOrUpdate">
      <div class="position-panel">
        <div class="e-item">
          <span class="title">广告位名称</span>
          <div class="dis-block">
            <w-input :holder="`请填写`" v-model="params.apTitle" rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div class="e-item" style="margin-top:10px;">
          <span class="title" style="vertical-align:top;">广告位简介</span>
          <div class="dis-block">
            <w-input :type='`textarea`' :holder="`请填写`" v-model="params.apContent" rule="isEmpty" error="*此项必填"></w-input>
          </div>
        </div>
        <div class="e-item">
          <span class="title">广告位类别</span>
          <div class="dis-block">
            <w-select :options='adType' v-model="params.apType"></w-select>
          </div>
          <em>选择此广告位的广告形式</em>
        </div>
        <div class="e-item">
          <span class="title">广告位价格</span>
          <div class="dis-block" >
            <w-input :holder="`请填写`" v-model="params.apPrice"></w-input>
          </div>
          <em>金币/天</em>
        </div>
        <div class="e-item">
          <span class="title">广告终端</span>
          <div class="dis-block">
              <span>
                <w-radio name='type' :label='`PC`' v-model="params.apLocation">PC端</w-radio>
              </span>
              <w-radio name='type' :label='`MOBILE`' v-model="params.apLocation">手机端</w-radio>
          </div>
        </div>
        <div class="e-item">
          <span class="title">广告位置</span>
          <div class="dis-block">
              <span>
                <w-radio :label='`homePage`' name='pos' v-model="params.apHomeChannel">首页</w-radio>
              </span>
              <w-radio :label='`channel`' name='pos' v-model="params.apHomeChannel">频道</w-radio>
          </div>
        </div>
        <div class="e-item">
          <span class="title">是否启用</span>
          <div class="dis-block">
              <span><w-radio :label='1' name='enable' v-model="params.apStatus">是</w-radio></span>
              <w-radio :label='0' name='enable' v-model="params.apStatus">否</w-radio>
          </div>
        </div>
        <div class="e-item">
          <span class="title">展示方式</span>
          <div class="dis-block" style="vertical-align:top;">
            <div style="margin-bottom:20px;">
              <w-radio :label='1' name='way' v-model="params.apShowType">可以发布多条广告并随机展示</w-radio>
            </div>
            <w-radio :label='0' name='way' v-model="params.apShowType">只允许发布并展示一条广告</w-radio>
          </div>
        </div>
        <!-- 按钮 -->
        <div class='submit-btn'>
          <!-- <w-button>提交</w-button> -->
          <button type="submit" class="btn">提交</button>
          <button class="btn colse" @click.prevent="$router.go(-1)">取消</button>
        </div>
      </div>
    </w-form-validate>
  </div>
</template>

<script>
import { apiDecorateMange } from 'js/api'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      // 类别
      adType: [
        {
          value: 'img',
          label: '图片'
        },
        {
          value: 'slide',
          label: '幻灯片'
        },
        {
          value: 'bg_slide',
          label: '背景幻灯片'
        },
        {
          value: 'scroll',
          label: '滚动'
        },
        {
          value: 'text',
          label: '文字'
        }
      ],
      // 新增/编辑 -- 参数
      params: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id) || '',
        apTitle: '',
        apContent: '',
        apLocation: this.$route.query.terminal || 'PC',
        apType: '',
        apHomeChannel: 'channel',
        apPrice: '',
        apStatus: '1',
        apShowType: '0'
      },
      // 编辑时，获取广告位信息
      queryParams: {
        accessToken: '',
        threeMenuCode: this.$route.query.three || '',
        id: Number(this.$route.query.id) || ''
      }
    }
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    if (this.$route.query.id) {
      this._getAdsInfo()
    }
  },
  methods: {
    _getAdsInfo() {
      this.queryParams.accessToken = this.token
      apiDecorateMange.getAdsInfo(this.queryParams).then(data => {
        this.params.apTitle = data.data.advertise.apTitle
        this.params.apContent = data.data.advertise.apContent
        this.params.apLocation = data.data.advertise.apLocation
        this.params.apType = data.data.advertise.apType
        this.params.apHomeChannel = data.data.advertise.apHomeChannel
        this.params.apPrice = data.data.advertise.apPrice
        this.params.apStatus = data.data.advertise.apStatus
        this.params.apShowType = data.data.advertise.apShowType
      })
    },
    submitSaveOrUpdate() {
      if (!this.params.apType) {
        this.$toast('请选择广告类别')
        return
      }
      if (this.params.apPrice && !/^[0-9]+([.][0-9]{0,2}){0,1}$/.test(this.params.apPrice)) {
        this.$toast('请输入正确的价格')
        return
      }
      this.params.accessToken = this.token
      apiDecorateMange.addAds(this.params).then(data => {
        if (data && data.code != 200) return
        this.$toast(`${this.$route.query.id ? '修改' : '新增'}成功`, () => {
          this.$router.go(-1)
        })
      })
    }
  }
}
</script>

<style lang='scss' scoped>
@import '../../scss/_var.scss';
@import '../../scss/_comment.scss';
.position-panel {
  width: 406px;
  margin: 0 auto;
  .e-item {
    display: block;
    margin-bottom: 20px;
    margin-left: 20px !important;
    em {
      color: $color-main;
      text-align: right;
      display: block;
      font-size: 10px;
      margin-top: 7px;
    }
    .title {
      width: 76px;
      font-size: 14px;
      margin-right: 20px;
    }
    .dis-block {
      width: 284px;
      vertical-align: middle;
      span {
        display: inline-block;
        width: 135px;
      }
    }
  }
}
.submit-btn {
  text-align: center;
  button {
    width: 90px !important;
  }
}
</style>
